<template>
	<view class="zg-area">
		<view class="area-3">
			<image src="/pagesShop/static/ob.png" mode=""></image>
			<view class="area3-content" v-if="details.status !== -1">
				<view class="area3-content-left" v-if="details.status === 0">
					<view class="a3l-title">待付款</view>
					<view class="a3l-info">等待买家付款</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 1">
					<view class="a3l-title">待发货</view>
					<view class="a3l-info">等待卖家发货</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 2">
					<view class="a3l-title">待收货</view>
					<view class="a3l-info">等待买家发货</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 3">
					<view class="a3l-title">待评价</view>
					<view class="a3l-info">等待买家评价</view>	
				</view>
				<view class="area3-content-left" v-if="details.status === 4">
					<view class="a3l-title">已完成</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 5">
					<view class="a3l-title">无效订单</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 7">
					<view class="a3l-title">已支付</view>
					<view class="a3l-info">等待成团</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 8">
					<view class="a3l-title">砍价中</view>
					<view class="a3l-info">砍价倒计时{{details.f_time || 0}}</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 9">
					<view class="a3l-title">待支付</view>
					<view class="a3l-info">砍价成功</view>
				</view>
				<view class="area3-content-left" v-if="details.status === 10">
					<!-- <view class="a3l-title">待支付</view> -->
					<view class="a3l-info">砍价失败</view>
				</view>
				<view class="area3-content-right">
					<image src="/pagesShop/static/bag1.png" mode="widthFix" v-if="details.status === 0"></image>
					<image src="/pagesShop/static/bag2.png" mode="widthFix" v-if="details.status === 1"></image>
					<image src="/pagesShop/static/bag4.png" mode="widthFix" v-if="details.status === 2"></image>
					<image src="/pagesShop/static/bag3.png" mode="widthFix" v-if="details.status === 3"></image>
					<image src="/pagesShop/static/bag6.png" mode="widthFix" v-if="details.status === 4"></image>
					<image src="/pagesShop/static/bag5.png" mode="widthFix" v-if="details.status === 5"></image>
					<image src="/pagesShop/static/bag5.png" mode="widthFix" v-if="details.status === 0"></image>
				</view>
			</view>
		</view>
		<view class="area-1">
			<view class="area-1-left">
				<image src="/pagesShop/static/location.png" mode="widthFix"></image>
				<view class="area-1-left-info">
					<view class="">
						<text>{{details.receiverName || ''}}</text>
						<text>{{details.receiverPhone || ''}}</text>
					</view>
					<view class="">
						<text>{{details.receiverProvince || ''}}{{details.receiverCity || ''}}{{details.receiverArea || ''}}</text>
					</view>
					<view class="">
						<text>{{details.receiverAddress || ''}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="area-1-right">
				<image src="/pagesShop/static/right.png" mode="widthFix"></image>
			</view> -->
		</view>
		<view class="area-2">
			<view class="area-2-card" >
				<view class="a2c-title">
					<image class="tp-img28 tp-mr20" src="../static/shop.png" mode=""></image>
					<text>{{details.shopName || '店铺名称'}}</text>
				</view>
				<view class="a2c-content" >
					<view class="a2c-img">
						<image :src="`${shopImgUrl}${details.productPic}`" mode="aspectFill"></image>
					</view>
					<view class="a2c-info">
						<view class="a2c-info-title">
							{{details.productName || '商品名称'}}
						</view>
						<!-- <view class="a2c-info1">
							<text>{{details.productSkuId}}</text>
						</view> -->
						<view class="a2c-info2">
							<view class="a2c-info-price">
								<text>￥{{(details.productPrice) || 0}}</text>
							</view>
							<view class="a2c-info-num">
								<text>x{{(details.productQuantity) || 0}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="flex flex_start" >
				<image class="tp-img36" style="margin-right: 20rpx;" src="../static/bag5.png" mode=""></image>
				<text class="ellispsis1">凉皮到服务器带我去景当前为</text>
			</view>
			<view class="flex flex_start" style="margin-top: 20rpx;">
				<image class="tp-img88" style="margin-right: 20rpx;" src="../static/se1.png" mode=""></image>
				<view class="">
					<text class="tp-mt20">何必呢任务多块钱外婆的空气看到我贫穷的看</text>
					<view class="flex flex_between tp-mt20">
						<text>成功砍价</text>
						<text>X1</text>
					</view>
				</view>
			</view> -->
			<!-- <view class="area-2-row">
				<view class="a2r-left">
					运费
				</view>
				<view class="a2r-right">
					<text>{{details.freightAmount || 0}}元</text>
				</view>
			</view> -->
			<view class="area-2-row">
				<view class="a2r-left">
					合计
				</view>
				<view class="a2r-right">
					<!-- <text class="a2r-price">￥{{details.payAmount || 0}}</text> -->
					<text class="a2r-price">免费</text>
				</view>
			</view>
		</view>
		<view class="area-4">
			<view class="tj" @click="pageJumps('/pagesShop/details/kj?orderid=' + id)"><!-- 传id -->
				<view class="tj-title">
					<view class="tt-left">
						<text>砍价信息</text>
					</view>
					<view class="tt-right">
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="area-4">
			<view class="tj">
				<view class="tj-title">
					<view class="tt-left">
						<text>订单信息</text>
					</view>
					<view class="tt-right">
						
					</view>
				</view>
			</view>
			<view class="a4-content">
				<view>订单号：{{ details.orderSn  || '' }}</view>
				<view>下单时间：{{details.submitTime || '' }}</view>
				<!-- <view>支付时间：{{details.submitTime || '' }}</view> -->
				<!-- <view v-if="details.status > 0">支付方式：{{details.payType == '0' ? '余额' : details.payType == '1' ? '微信' :details.payType == '2' ? '支付宝' : details.payType == '3' ? '未支付' : ''}}</view> -->
				<!-- <view v-if="details.createTime">发货时间：{{details.createTime || '' }}</view> -->
			</view>
			
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
		<!-- 工具栏-下 -->
		<view class="fixed-tool-bottom" v-if="details.status !== 8 && details.status !== 4 && details.status !== 10&& details.status !== 5">
			<view class="ftb-l">
			</view>
			<view class="ftb-r" v-if="details.status === 0 || details.status === 9 ">
				<button plain style="background: #00B4FF;color: #FFFFFF;" @click="pay">支付订单</button>
			</view>
			<view class="ftb-r" v-if="details.status == 2">
				<button plain class="active" @click="confirmReceive">确认收货</button>
			</view>
			 <view class="ftb-r" v-if="details.status == 1 || details.status == 2">
				<button plain @click="servive">联系客服</button>
			</view> 
			<!-- <view class="ftb-r" v-if="details.status == 3">
				<button plain class="active" @click="goRouter2">去评价</button>
			</view> -->
		</view>
		<!-- 支付 -->
		<CommonPaySecond ref="commonPay" :price="details.payAmount" :orderInfo="orderInfo"
		 @payMoney="payMoney" @wechatPaySuccess="wechatPaySuccess"></CommonPaySecond>
		 <!-- 客服服务电话弹框 S-->
		 <CommonServicePhone ref="takePhone" type="11"></CommonServicePhone>
		 <!-- 客服服务电话痰喘 E-->
	</view>
</template>

<script>
	import utils from '../../utils/utils.js';
	import {
		mapGetters
	} from 'vuex';
	import CommonPaySecond from '../common/common-pay-second.vue'

	export default {
		components: {
			CommonPaySecond,
		},
		data() {
			return {
				id: '',//订单id
				orderNo:'',//砍价的订单号
				details: {},//商品详情
				shopdetail:{},//店铺详情,里面有电话
			}
		},
		computed: {
			...mapGetters(['getToken']),
		},
		onReady() {
			// this.openP1()
		},
		onPullDownRefresh() {
			this.getDetails1()
		},
		onLoad(opt) {
			this.id = opt.id
			// this.orderNo = opt.orderno
			if (this.id) {
				this.getDetails1()
			}
			
		},
		methods: {
			// 定时更新
			formatTime() {
				this.timer = setInterval(() => {
						const time = this.computeTime(this.details.kjFinishTime)
						this.$set(this.details,'f_time',time)
					
				},1000)
			},
			// 计算列表倒计时
			computeTime(finishTime) {
				finishTime = finishTime.replace(/-/g,"/")
				if(typeof finishTime === 'string' && new Date(finishTime).toString() !== 'Invalid Date') {
					const now_time = new Date().getTime()
					const finish_time = new Date(finishTime).getTime()
					const sy_time = finish_time-now_time
					if(sy_time > 0) {
						 // 时
						const hour = Math.floor( sy_time / (1000*60*60) ).toString().padStart(2,'0')
						const sy_time1 = Math.floor( sy_time % (1000*60*60) )
						// 分
						const min = Math.floor( sy_time1 / (1000*60) ).toString().padStart(2,'0')
						const sy_time2 = Math.floor( sy_time1 % (1000*60) )
						// 秒
						const sec = Math.floor( sy_time2 / (1000) ).toString().padStart(2,'0')
						// 剩余时间
						const time_str = `${hour}:${min}:${sec}`
						return time_str
					} else {
						return '活动已结束'
					}
				} else {
					return '无效的结束时间'
				}
			},
			// 客服
			servive() {
				if(this.shopdetail.scPhone) {
					uni.makePhoneCall({
						phoneNumber: this.shopdetail.scPhone
					})
				} else {
					uni.showToast({
						title:'暂无客服电话',
						icon:'none'
					})
				}
			},
			// 余额支付成功
			payMoney(pwd) {
				uni.showToast({
					title: '支付中...',
					icon: 'loading',
					mask: true,
				})
				this.$http.post(this.$api.shop_order_7, {}, {
					params: {
						orderNo: this.details.orderSn,
						payType: 0,	
						sourceType: 0,
						payPassword: pwd
					}
				}).then(res => {
					if (res.code === 200) { // 密码正确，支付成功
						this.$refs.commonPay.closeKeyBoard()
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							mask: true,
						})
						setTimeout(() =>{
							uni.redirectTo({
								url: '../list/shopOrderList2'
							});
						},600)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 确认收货
			confirmReceive() {
				this.$http.post(this.$api.confirmReceipt + '?id=' + this.id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '收货成功',
							icon: 'none'
						})
						uni.redirectTo({
							url: '../list/shopOrderList2'
						});
					}
				})
			},
			// 微信支付成功
			wechatPaySuccess() {
				this.$refs.commonPay.close()
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					mask: true,
				})
				setTimeout(() =>{
					uni.redirectTo({
						url: '../list/shopOrderList'
					});
				},600)
			},
			// 取消支付
			noPay() {
				uni.showToast({
					title: '取消支付',
					icon: 'none'
				})
			},
			// 订单信息
			orderInfo() {
				let o = {
					orderNo: this.details.orderSn
				}
				return o
			},
			// 支付订单
			pay() {
				this.$refs.commonPay.show()
			},
			// 根据订单id查询商品详情
			getDetails1() {
				this.$http.post(this.$api.shop_order_4 + '?id=' + this.id + '&type=3').then(res => {
					uni.stopPullDownRefresh()
					if (res.code === 200) {
						this.formatTime();
						this.details = res.data
						this.details.status = isNaN(parseInt(this.details.status)) ? -1 : parseInt(this.details.status)
					} else {
						this.details = {}
					}
					this.getkefuphone()
					if ( res.data.status == 8) {
						/* this.timer = setInterval(() => { // 未支付订单(验证订单是否超时)
							this.countDownStartTime = utils.getCountDownTime(res.data.kjFinishTime)
						}, 1000)
						console.log(this.countDownStartTime,'倒计时') */
					} 
				})
			},
			//根据商品详情的shopid查询店铺详情获取客服电话
			getkefuphone(){
				this.$http.post(this.$api.shop_shop_1 + '?id=' + this.details.shopId).then(res => {
					if(res.code == 200){
						this.shopdetail = res.data
					}
				})
			},
			openP1() {
				this.$refs.p1.open()
			},
			closeP1() {
				this.$refs.p1.close()
			},
			// 联系客服
			goRouter1() {
				uni.showToast({
					title: '在线客服',
					icon: 'none'
				})
			},
			// 去评价
			goRouter2() {
				uni.navigateTo({
					url: '../details/evaluate?pageName=砍价&orderNo='+ this.details.orderSn + '&shopInfo=' + JSON.stringify(this.details)
				})
			},
			handleArr1(str) {
				if (typeof str === 'string' && str !== '') {
					let arr = []
					try {
						arr = JSON.parse(str)
					} catch (e) {
						//TODO handle the exception
					}
					return arr
				} else {
					return []
				}
			},
			// handleData1(item1) {
			// 	const price = parseInt(item1.productPrice)
			// 	const num = parseInt(item1.productQuantity)
			// 	if(!isNaN(price) && !isNaN(num)) {
			// 		return price * num
			// 	} else {
			// 		return 0
			// 	}
			// },
		}
	}
</script>

<style lang="scss" scoped>
	.kefu-fixed {
		position: fixed;
		right: 60rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 100rpx;
	}
	.area-3 {
		height: 180rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;
	}

	.area3-content {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
		padding: 0 60rpx;
	}

	.a3l-title {
		font-size: 32rpx;
		margin-bottom: 16rpx;
	}

	.a3l-info {
		font-size: 26rpx;
	}

	.area3-content-right {
		image {
			width: 100rpx;
			height: auto;
		}
	}

	.pay-content {
		background-color: #fff;
		border-radius: 10rpx;
		width: 660rpx;
	}

	.pay-title {
		padding: 20rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;

		view {
			flex-shrink: 0;
			width: 40rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pay-row1 {
		text-align: center;
		color: $uni-color-error;
		font-size: 50rpx;
		padding: 50rpx;
	}

	.pay-row2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}

	.pr2-left {
		display: flex;
		align-items: center;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}

	.pr2-right {
		display: flex;
		align-items: center;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 20rpx;
		}
	}

	.pay-row3 {
		padding: 60rpx 30rpx;

		button {
			background-color: $blue;
			color: #fff;
			border-radius: 10rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
		}
	}

	.area-1 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.area-1-left {
		display: flex;
		align-items: center;
		color: #666;

		image {
			width: 40rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}

	.area-1-left-info {
		view {
			margin-bottom: 10rpx;
			color: #666;

			&:nth-of-type(1) {
				font-size: 26rpx;

				text {
					margin-right: 20rpx;
				}
			}

			&:nth-last-of-type(1) {
				margin-bottom: 0
			}
		}
	}

	.area-1-right {
		width: 50rpx;
		display: flex;
		justify-content: flex-end;

		image {
			width: 14rpx;
			height: auto;
		}
	}

	.area-2 {
		background-color: #fff;
		margin: 20rpx 30rpx;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
	}

	.area-2-card {
		padding-bottom: 20rpx;
		border-bottom: 1px solid #eee;
	}

	.a2c-title {
		display: flex;
		align-items: center;
		color: #666;
		margin-bottom: 30rpx;
	}

	.a2c-content {
		display: flex;
	}

	.a2c-img {
		flex-shrink: 0;
		width: 140rpx;
		height: 140rpx;
		margin-right: 20rpx;

		image {
			width: 140rpx;
			height: 140rpx;
		}
	}

	.a2c-info {
		flex-grow: 1;
	}

	.a2c-info-title {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.a2c-info1 {
		margin-bottom: 10rpx;
		color: #999;

		text {
			margin-right: 10rpx;
		}
	}

	.a2c-info2 {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.a2c-info-price {
		color: $uni-color-error;
		font-weight: bold;
		font-size: 30rpx;
	}

	.area-2-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0 0;
	}

	.a2r-left {}

	.a2r-right {
		display: flex;
		align-items: center;

		image {
			width: 14rpx;
			height: auto;
			margin-left: 20rpx;
		}
	}

	.a2r-tip {
		color: #999;
	}

	.a2r-price {
		color: $uni-color-error;
	}

	.fixed-tool-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}

	.ftb-l {
		display: flex;
		align-items: center;

		text {
			&:nth-of-type(1) {
				font-size: 26rpx;
			}
		}
	}

	.ftb-price {
		color: $uni-color-error;
		font-size: 36rpx;
		font-weight: bold;
	}

	.ftb-r {
		display: flex;
		justify-content: flex-end;
		align-items: center;

		button {
			background-color: transparent;
			color: #999;
			border: 1px solid #ddd;
			font-size: 26rpx;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;

			&:not(:nth-of-type(1)) {
				margin-left: 20rpx;
			}

			&.active {
				background-color: $uni-color-warning;
				border: 0;
				color: #fff;
			}
		}
	}

	.tj {
		background-color: #fff;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.tj-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tt-left {
		display: flex;
		align-items: center;
		font-size: 30rpx;

		&::before {
			content: "";
			display: block;
			width: 8rpx;
			height: 26rpx;
			background-color: #00B4FF;
			margin-right: 20rpx;
		}
	}

	.tt-right {
		display: flex;
		align-items: center;

		image {
			width: 10rpx;
			height: auto;
			margin-left: 20rpx;
		}

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.area-4 {
		margin: 30rpx;
		border-radius: 10rpx;
	}

	.a4-content {
		background-color: #fff;
		color: #666;
		padding: 0 30rpx 30rpx;

		view {
			margin-bottom: 10rpx;

			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
		}
	}
</style>
